<template>
    <div class="pie_box" ref="echartDom"></div>
</template>

<script setup lang="ts">
/*
传参格式：
写出来的都是必传
可以自己加参数会追加
    legendStyle = {// 图例样式
      show: true,
      icon: "rect",
      left: 0,
      top: 0,
      itemWidth: 0,
      itemHeight: 0,
      itemGap: 0,
    };
    gridConfig = {// 网格样式
    };
     seriesStyle:{//series数据样式
        radius: [15, 50],
        center: ['25%', '55%'],
    },
    seriesData:[//series数据
        [
        { value: 26, name: '实物配租' },
        { value: 5, name: '共有产权房' },
        { value: 20, name: '租金补贴' },
        { value: 5, name: '其他' },
        ]
    ]
*/
import { inject, ref, shallowRef, onMounted, onUnmounted, watch,toRaw,watchEffect,defineEmits } from "vue";

// 接收参数
const props = defineProps({
  housingSupplyStatsData: {
    type: Object,
    default: () => {},
  },
  dialogData: {
    type: Object,
    default: () => ({
      fontSizeTimes: 1
    })
  }
});
// 数据定义
const echartDom = ref<null | HTMLDivElement>(null);
const myChart = shallowRef<null | any>(null);
const echarts = inject<any>("echarts");
const emit = defineEmits(['dialogPieData'])
 // 字体自适应方法
 const pxToRem = (px: number) => {
    const scale = document.documentElement.clientWidth / 1920;
    return Math.round(px * Math.min(scale, 3));
};
// echarts初始化渲染
let legendStyle = props.housingSupplyStatsData.legendStyle//图例
let gridStyle = props.housingSupplyStatsData.gridStyle//网格
let seriesData = props.housingSupplyStatsData.seriesData//serires数据
let seriesStyle = props.housingSupplyStatsData.seriesStyle//serires配置
console.log(props.housingSupplyStatsData)

const getEchart = () => {
  if (echartDom.value) {
    myChart.value = echarts.init(echartDom.value); 
      // 图例配置
      const legendConfig = {
        show: legendStyle.show,
        icon: legendStyle.icon,
        left: pxToRem(legendStyle.left)? pxToRem(legendStyle.left):legendStyle.left,
        right:pxToRem(legendStyle.right),
        top: typeof legendStyle.top == "number" ? pxToRem(legendStyle.top) :legendStyle.top,
        bottom: pxToRem(legendStyle.bottom),
        itemWidth: pxToRem(props?.dialogData?.fontSizeTimes === 1 ? legendStyle.itemWidth : 20),
        itemHeight: pxToRem(props?.dialogData?.fontSizeTimes === 1 ? legendStyle.itemHeight : 20),
        itemGap: pxToRem(legendStyle.itemGap),
        textStyle: {
          color: "#fff",
          fontSize: pxToRem(props?.dialogData?.fontSizeTimes === 1 ? 12 : 24),
          rich:{
            one:{
              width:pxToRem(100),
            },
            two:{
              width:pxToRem(50),
            },
            three:{
              width:pxToRem(50),
            }
          },
          padding: [0, 0, pxToRem(-3), 0],
        },
      };
       // 追加项
       for(let j in legendStyle){
        if(j != 'show' && j != 'icon'  && j != 'left'  && j != 'right' && j != 'top' && j != 'itemWidth'  && j != 'itemHeight'   && j != 'itemGap'  && j != ' textStyle'){
          legendConfig[j] = toRaw(legendStyle[j])
        }
      }
      // series配置
     let seriesConfig = seriesData.map((item,index) => {
          return{
            name:'',
            type:'pie',
            center: props?.dialogData?.fontSizeTimes === 1 ? toRaw(seriesStyle.center) : ["50%", "50%"],
            radius: props?.dialogData?.fontSizeTimes === 1 ? [pxToRem(toRaw(seriesStyle.radius)[0]),pxToRem(toRaw(seriesStyle.radius)[1])] : ['55%', '70%'],
            itemStyle: {
              borderRadius: pxToRem(2),
              backgroundColor:'red'
            },
            data:toRaw(seriesData[index])  
          }
      })
      // 追加项
      for(let i in seriesStyle){
        if(i != 'radius' && i != 'center'  && i != ' type'  && i != ' seriesData'){
          seriesConfig[0][i] = toRaw(seriesStyle[i])
        }
      }
      //绘图
      const option = {
        tooltip: {
          trigger: "item",
          axisPointer: {
            type: "line",
            lineStyle: {
              color: "rgba(40,252,255,0.6)",
              shadowBlur: 10,
              shadowColor: "rgba(0, 0, 0, 0.9)",
            },
          },
          position: function (point, params, dom, rect, size) {
            return [point[0], '5%']; // 示例：将 tooltip 定位在鼠标的水平位置和视窗顶部 10% 的位置
          },
          textStyle: {
            color: "#fff",
            fontSize: pxToRem(18),
          },
          backgroundColor: "rgba(8, 64, 132, 0.9)",
          borderColor:'#fff',
        },
          legend: legendConfig,
          series:seriesConfig
      }
      myChart.value.setOption(option);
      myChart.value.on("click", (params) => {
        emit('dialogPieData',props.housingSupplyStatsData)
      });
  }
};
const updateChart = () => {
  if (myChart.value) {
    myChart.value.dispose(); // 销毁旧图表实例
  }
   legendStyle = props.housingSupplyStatsData.legendStyle//图例
   gridStyle = props.housingSupplyStatsData.gridStyle//网格
   seriesData = props.housingSupplyStatsData.seriesData//serires数据
   seriesStyle = props.housingSupplyStatsData.seriesStyle//serires配置 
  getEchart();
};

watchEffect(() => {
updateChart();
});

onMounted(() => {
  getEchart();
  window.addEventListener("resize", () => {
    if (myChart.value) {
      myChart.value.dispose(); // 销毁旧图表实例
    }
    getEchart(); // 创建新的图表实例
  });
});

onUnmounted(() => {
  window.removeEventListener("resize", () => {
    if (myChart.value) {
      myChart.value.dispose(); // 在组件销毁时也需要销毁图表实例
    }
  });
});
</script>

<style scoped lang="less">
.pie_box{
    width: 100%;
    height: 100%;
}
.echarts-background {
  background-color: transparent !important;
}
.h173 {
  height: 173px;
}
.dialog-h173 {
  width: 919px;
  height: 500px;
}
</style>
